<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">
        <template>
          <div class="tab-form">
            <el-form label-width="100px">
              <el-form-item label="任务名字" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="任务版本" prop="version">
                <el-input v-model="form.version" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="运行模式" prop="version">
                <el-select
                  v-model="form.config.datax.model"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dictConst.taskModelTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="任务描述" prop="version">
                <el-input
                  v-model="form.description"
                  type="textarea"
                  autocomplete="off"
                  :autosize="{ minRows: 4, maxRows: 8 }"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="调度配置" name="second"
        ><div class="tab-form">
          <el-form label-width="100px">
            <el-form-item label="执行类型" prop="exeType">
              <el-select
                v-model="form.config.schedul.exeType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dictConst.exeTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="执行时间"
              prop="version"
              v-if="form.config.schedul.exeType === 1"
            >
              <el-date-picker
                v-model="form.config.schedul.executetime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="小时间隔"
              prop="version"
              v-if="form.config.schedul.exeType === 2"
            >
              <el-input-number
                v-model="form.config.schedul.hournum"
                controls-position="right"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="分钟间隔"
              prop="version"
              v-if="form.config.schedul.exeType === 2"
            >
              <el-input-number
                v-model="form.config.schedul.minnum"
                controls-position="right"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="小时"
              prop="version"
              v-if="
                form.config.schedul.exeType === 3 ||
                form.config.schedul.exeType === 4 ||
                form.config.schedul.exeType === 5
              "
            >
              <el-input-number
                v-model="form.config.schedul.hour"
                controls-position="right"
                :min="0"
                :max="23"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="分钟"
              prop="version"
              v-if="
                form.config.schedul.exeType === 3 ||
                form.config.schedul.exeType === 4 ||
                form.config.schedul.exeType === 5
              "
            >
              <el-input-number
                v-model="form.config.schedul.minute"
                controls-position="right"
                :min="0"
                :max="59"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="每周"
              prop="version"
              v-if="form.config.schedul.exeType === 4"
            >
              <el-select
                v-model="form.config.schedul.week"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dictConst.weekList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="每月"
              prop="version"
              v-if="form.config.schedul.exeType === 5"
            >
              <el-input-number
                v-model="form.config.schedul.day"
                controls-position="right"
                :min="1"
                :max="30"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="core表达式"
              prop="version"
              v-if="form.config.schedul.exeType === 6"
            >
              <el-input
                v-model="form.config.schedul.cronExpression"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="开始时间"
              prop="version"
              v-if="form.config.schedul.exeType != 0"
            >
              <el-time-picker
                v-model="form.config.schedul.startTime"
                placeholder="请选择"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item
              label="结束时间"
              prop="version"
              v-if="form.config.schedul.exeType != 0"
            >
              <el-time-picker
                v-model="form.config.schedul.stopTime"
                :picker-options="{
                  minTime: form.config.startTime,
                }"
                placeholder="请选择"
              >
              </el-time-picker>
            </el-form-item>
          </el-form></div
      ></el-tab-pane>
      <el-tab-pane label="数据处理" name="third"
        ><div class="tab-form">
          <el-form label-width="120px">
            <el-form-item label="前置检查" prop="version">
              <el-radio-group v-model="form.config.datax.setting.dryRun">
                <el-radio
                  v-for="item in dictConst.trueNoList"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="钥匙版本" prop="name">
              <el-input
                v-model="form.config.datax.setting.keyVersion"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="传输速率" prop="version">
              <el-input-number
                v-model="form.config.datax.setting.speed.byte"
                controls-position="right"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="传输record" prop="version">
              <el-input
                v-model="form.config.datax.setting.speed.record"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="并发数" prop="version">
              <el-input
                v-model="form.config.datax.setting.speed.channel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="脏数据条数" prop="version">
              <el-input-number
                v-model="form.config.datax.setting.errorLimit.recorde"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="脏数据占比" prop="version">
              <el-input
                v-model="form.config.datax.setting.errorLimit.percentage"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form></div
      ></el-tab-pane>
    </el-tabs>
    <div style="text-align: right; padding-right: 20px">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="onCancal">取消</el-button>
    </div>
  </div>
</template>
<script>
import lodash from "lodash";
export default {
  props: {
    job: Object,
  },
  data() {
    return {
      activeName: "first",
      form: lodash.cloneDeep(this.job),
    };
  },

  methods: {
    handleClick() {},
    onSubmit() {
      if (!this.form.name) {
        this.$message.warning("请填写任务名字");
        return;
      }
      lodash.merge(this.job, this.form);
      this.$emit("close");
    },
    onCancal() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.tab-form {
  padding: 0px 20px;
}
</style>